<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
			
				text-align: center;
				margin: 50px;
			}
			
			table{
				border: 1px solid black;
				margin: auto;
				width: 500px;
			}
			
			tr,th{
					text-align: center;
					border:1px solid black;
			}
			
			a{
				text-decoration: none;
			
			}
			
			
		</style>
	</head>
	<body>
		<div>
			<input type="text" name="id" id="id" placeholder="请输入id" />
			<input type="text" name="userName" id="userName" placeholder="请输入用户名" />
			<input type="text" name="gender" id="gender" placeholder="请输入性别" />	
			<input type="button" name="btn" id="btn" value="添加" />
		</div>
		
		<table >
			<caption>学生信息表</caption>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<tr>
				<th>1</th>
				<th>关羽</th>
				<th>男</th>
				<th><a href="javascript:void(0);" onclick="delTr(this);">删除</a></th>
			</tr>
			
			<tr>
				<th>2</th>
				<th>刘备</th>
				<th>男</th>
				<th><a href="javascript:void(0);" onclick="delTr(this);">删除</a></th>
			</tr>
			
			<tr>
				<th>3</th>
				<th>张飞</th>
				<th>男</th>
				<th><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></th>
			</tr>
			
		</table>
		
		<script type="text/javascript">
			
			document.getElementById("btn").onclick = function() {
				var id = document.getElementById("id").value;
				var userName = document.getElementById("userName").value;
				var gender = document.getElementById("gender").value;
				var table = document.getElementsByTagName("table")[0];
				
				
				
				table.innerHTML += "<tr>\n" +
				   "        <th>"+id+"</th>\n" +
            "        <th>"+userName+"</th>\n" +
            "        <th>"+gender+"</th>\n" +
            "        <th><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></th>\n" +
            "    </tr>";
				
			}
			
			function delTr(obj) {
				var table = obj.parentNode.parentNode.parentNode;
				alert(table);
				var childer = obj.parentNode.parentNode;
					alert(childer);
				table.remove(childer);
				
			}
			
			
		</script>
		
		
	</body>
</html>
